<template>
	<view class="bigbox">
		<view class="box">
			<view><text>{{data.articleTitle}}</text></view>
			<view><text>{{data.uploadTime}}</text></view>
			<view>
				<image :src="data.coverUrl"></image>
			</view>
			<view><text>&nbsp;&nbsp;&nbsp;&nbsp;{{data.text}}</text></view>
			<!-- <view>
				<image
					src="https://cimg.axureshop.com/47/f6/19/47f6193bc5004b1388c6fa23d2a9bd4e/images/%E6%95%99%E8%82%B2%E5%A4%B4%E6%9D%A1/u2128.png">
				</image>
			</view>
			<view>
				<text>&nbsp;&nbsp;&nbsp;&nbsp;阅读是孩子进行语言练习的重要方式，而且这个时期的阅读习惯很容易长期保持下去。进行亲子阅读，可以极大地提高孩子的阅读能力和语言表达能力。</text>
			</view> -->
		</view>
		<view class="bottom">
			<view>
				<image @click="likeNum(data.id)"
					:src='imgurl'>
				</image><text>{{data.likeNum}}</text>
			</view>
			<view>
				<image @click="collectNum(data.id)"
					:src="imgurl1">
				</image><text>{{data.collectNum}}</text>
			</view>
		</view>
	</view>

</template>

<script setup>
import {onLoad} from "@dcloudio/uni-app"
import {ref} from 'vue'
import http from "@/utils/http.js";
let id=ref()
let islove=false;
let data=ref()
let imgurl=ref('https://cimg.axureshop.com/47/f6/19/47f6193bc5004b1388c6fa23d2a9bd4e/images/%E6%95%99%E8%82%B2%E5%A4%B4%E6%9D%A1%E8%AF%A6%E6%83%85/u2193.png')
let imgurl1=ref('https://cimg.axureshop.com/47/f6/19/47f6193bc5004b1388c6fa23d2a9bd4e/images/%E6%95%99%E8%82%B2%E5%A4%B4%E6%9D%A1%E8%AF%A6%E6%83%85/u2187.png')
const likeNum=(id)=>{
	if(islove){
		imgurl.value='https://cimg.axureshop.com/47/f6/19/47f6193bc5004b1388c6fa23d2a9bd4e/images/%E6%95%99%E8%82%B2%E5%A4%B4%E6%9D%A1%E8%AF%A6%E6%83%85/u2193.png'
		islove=false
		http({
			url:'/article/education/UnlikeNum/'+id,
		}).then((res)=>{
			console.log(res);
		})
	}else{
		http({
			url:'/article/education/likeNum/'+id,
		}).then((res)=>{
			console.log(res);
		})
		imgurl.value='https://cimg.axureshop.com/47/f6/19/47f6193bc5004b1388c6fa23d2a9bd4e/images/%E6%95%99%E8%82%B2%E5%A4%B4%E6%9D%A1%E8%AF%A6%E6%83%85/u2196.png'
		islove=true
		uni.showToast({
			title:"已点赞",
			icon:"https://cimg.axureshop.com/47/f6/19/47f6193bc5004b1388c6fa23d2a9bd4e/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u1204.png"
		})
	}
}
const collectNum=(id)=>{
	if(islove){
		imgurl1.value='https://cimg.axureshop.com/47/f6/19/47f6193bc5004b1388c6fa23d2a9bd4e/images/%E6%95%99%E8%82%B2%E5%A4%B4%E6%9D%A1%E8%AF%A6%E6%83%85/u2187.png'
		islove=false
		http({
			url:'/user/collect/mvArticle',
			method:'post',
			params:{
				userId:1,
				articleId:id
			}
		}).then((res)=>{
			console.log(res);
		})
	}else{
		http({
			url:'/user/collect/articleAdd',
			method:'post',
			params:{
				userId:1,
				articleId:id
			}
		}).then((res)=>{
			console.log(res);
		})
		imgurl1.value='https://cimg.axureshop.com/47/f6/19/47f6193bc5004b1388c6fa23d2a9bd4e/images/%E6%95%99%E8%82%B2%E5%A4%B4%E6%9D%A1%E8%AF%A6%E6%83%85/u2189.png'
		islove=true
		uni.showToast({
			title:"已收藏",
			icon:"https://cimg.axureshop.com/47/f6/19/47f6193bc5004b1388c6fa23d2a9bd4e/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u1204.png"
		})
	}
}
onLoad((option)=>{
  id.value=option.id
  //console.log(id.value);
  http({
	  url:'/article/education/queryAloneId/'+id.value,
  }).then((res)=>{
	  data.value=res.data
  })
 })
</script>

<style lang="less">
	page {
		background-color: #fdfdfd;
	}

	.bigbox {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		margin-top: 30rpx;

		.box {
			width: 670rpx;
			height: 1242rpx;
			background-color: rgba(255, 255, 255, 1);
			border-radius: 6rpx;
			box-shadow: 0px 4px 20px #fbfbfb;
			font-weight: 400;

			view:nth-child(1) {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 30rpx;

				text {
					font-size: 32rpx;
					font-weight: 700;
					color: #333333;
				}
			}

			view:nth-child(2) {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				margin-top: 26rpx;

				text {
					font-size: 24rpx;
					font-weight: 400;
					color: #999999;
				}
			}

			view:nth-child(3) {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 12rpx;

				image {
					width: 630rpx;
					height: 316rpx;
					font-weight: 400;
				}
			}

			view:nth-child(4) {
				display: flex;
				align-items: center;
				justify-content: center;
				line-height: 52rpx;
				text-align: left;
				margin-top: 12rpx;

				text {
					font-size: 24rpx;
					font-weight: 400;
					color: #999999;
				}
			}

			view:nth-child(5) {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 12rpx;

				image {
					width: 630rpx;
					height: 316rpx;
					font-weight: 400;
				}
			}

			view:nth-child(6) {
				display: flex;
				align-items: center;
				justify-content: center;
				line-height: 52rpx;
				text-align: left;
				margin-top: 12rpx;

				text {
					font-size: 24rpx;
					font-weight: 400;
					color: #999999;
				}
			}
		}
	}

	.bottom {
		width: 410rpx;
		height: 36rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 30rpx;
		view:nth-child(1){
			display: flex;
			align-items: center;
			justify-content: center;
		}
		view:nth-child(2){
			display: flex;
			align-items: center;
			justify-content: center;
		}
		view:nth-child(1) image {
			width: 40rpx;
			height: 36rpx;
		}
		
		view:nth-child(1) text {
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
			margin-left: 8rpx;
			line-height: 36rpx;
		}
		view:nth-child(2) text {
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
			margin-left: 8rpx;
			line-height: 36rpx;
		}
		view:nth-child(2) image {
			width: 40rpx;
			height: 36rpx;
		}
	}
</style>
